<!--
 * @Descripttion: 推荐品牌
 * @version: 
 * @Author:Hui
 * @Date: 2023-10-11 14:07:55
 * @LastEditTime: 2023-11-16 21:53:46
 * @LastEditors: sueRimn
-->

<template>
  <view class="hot-brand" v-show="list && list.length">
    <view class="title">热门回收品牌</view>

    <view class="list-wrap d-flex flex-wrap">
      <view
        class="item"
        v-for="item in list"
        :key="item.brandId"
        @click="$emit('handleBrandClick', item.brandId)"
      >
        <common-image
          :src="item.brandImage ? item.brandImage+'?x-oss-process=image/resize,m_fill,w_80' : ''"
          :styles="'width: 80rpx; height: 80rpx; display: block; margin: 0 auto; border-radius: 20rpx;'"
        />
        <view class="text">{{item.brandName}}</view>
      </view>
    </view>
  </view>
</template>


<script>
export default {
  props: {
    list: { type: Array, default: [] }
  }
}
</script>

<style lang="scss" scoped>

.hot-brand{
  margin: 24rpx 0 10rpx 0;
}

.title{
  font-size: var(--hui-font-size-28);
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--hui-color-title);    
  padding: 0 24rpx;
}

.list-wrap{
  background: #FFFFFF;
  border-radius: 20rpx;
  padding: 32rpx 20rpx 0rpx 20rpx;
  margin: 24rpx;
  .item{
    width: 25%;
    margin: 0 0 32rpx 0;
    .text{
      font-size: var(--hui-font-size-24);
      font-weight: 500;
      color: var(--hui-color-title);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      margin: 10rpx 0 0 0;
    }
  }
}
</style>